<template>
  <div>
    <h2>Home</h2>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "前端老兵"
    }
  },
  // 页面组件内部也有导航守卫，局部守卫
  beforeRouteEnter(to, from, next){
    console.log("Home 页面路由进入之前");
    // 路由跳转之前，当前的页面还没有进入呢，还没有实例化，所以 this 还不存在呢？！！
    // console.log(this.msg);
    next();
  },
  beforeRouteUpdate(to, from, next){
    console.log("Home 页面路由更新之前");
    next();
  },
  beforeRouteLeave(to, from, next){
    console.log(this.msg);
    console.log("Home 页面路由离开之前");
    next();
  }
};
</script>

<style>
</style>